<!-- 
 自定义顶部装饰栏
	 包含俩部分
	 1.状态栏
	 2.导航栏
 -->
<template>
	<div class="bar" :style="{'height':barHeight}">
		<div class="bar-body" :style="appBarStyles" ref="AppBarBody">
			<div class="status-bar" :style="statusBarStyles" v-if="statusBar"></div>
			<div class="nav-bar" :style="navBarStyles" v-if="navBar">
				<div class="left-el">
					<template v-if="$slots.left">
						<slot name="left"></slot>
					</template>
					<template v-else>
						<div @touchend="leftTap">
							<van-icon name="arrow-left" size="18" v-if="leftArrow" />
							<span>{{leftText}}</span>
						</div>
					</template>
				</div>
				<div class="title-el">
					<template v-if="$slots.title">
						<slot name="title"></slot>
					</template>
					<template v-else>
						<div @touchend="titleTap">
							<span> {{ title }} </span>
						</div>
					</template>
				</div>
				<div class="right-el">
					<template v-if="$slots.right">
						<slot name="right"></slot>
					</template>
					<template v-else>
						<div @touchend="rightTap">
							<span>{{rightText}}</span>
						</div>
					</template>
				</div>
			</div>
			<template v-if="$slots.ext">
				<slot name="ext"></slot>
			</template>
		</div>
	</div>
</template>

<script>
	export default {
		name:'AppBar',
		props: {
			title: { // 标题
				type: String,
				default: "标题",
			},
			leftText: { // 左侧文案
				type: String,
				default: "",
			},
			rightText: { // 右侧文案
				type: String,
				default: "",
			},
			leftArrow: { // 是否显示左侧箭头
				type: Boolean,
				default: true,
			},
			statusBar:{ // 是否显示状态栏
				type: Boolean,
				default: true,
			},
			navBar:{ // 是否显示导航栏
				type: Boolean,
				default: true,
			},
			appBarStyles:{ // 整体app装饰栏自定义样式
				type:Object,
				default:(()=>{ return {} })
			},
			statusBarStyles:{ // 状态栏自定义样式
				type:Object,
				default:(()=>{ 
					if(window.uni){
						const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
						return {
							height:statusBarHeight + "px"
						}  
					}
					return {height:"0px"} 
				})
			},
			navBarStyles:{ // 导航栏自定义样式
				type:Object,
				default:(()=>{ return {height:"46px"} })
			}
		},
		data() {
			return {
				barHeight:null, // 记录最终app装饰栏高度（字符串px单位）
				barHeightNum:Object.freeze(0), // 记录最终app装饰栏高度
				navBarHeightNum:Object.freeze(0), // 记录最终导航栏高度
				statusBarHeightNum:Object.freeze(0), // 记录最终状态高度
			}
		},
		created() {
			let navBarHeightNum = 0;
			let statusBarHeightNum = 0;
			if(this.navBar){
				navBarHeightNum = parseFloat(this.navBarStyles.height.replace(/[^\d.]/g, ''));
			}
			if(this.statusBar){
				statusBarHeightNum = parseFloat(this.statusBarStyles.height.replace(/[^\d.]/g, ''));
			}
			this.navBarHeightNum = Object.freeze(navBarHeightNum);
			this.statusBarHeightNum = Object.freeze(statusBarHeightNum);
			if(this.$slots.ext == null){
				const barHeightNum = (navBarHeightNum + statusBarHeightNum);
				this.barHeightNum = Object.freeze(barHeightNum);
				this.barHeight = barHeightNum+'px';
			}
		},
		mounted() {
			const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
			if(this.$slots.ext != null){
				const $AppBarBody = this.$refs.AppBarBody;
				this.observer = new MutationObserver(()=>{
					const barHeightNum = $AppBarBody.offsetHeight;
					this.barHeightNum = Object.freeze(barHeightNum);
					this.barHeight = barHeightNum+'px';
				});
				observer.observe($AppBarBody,{attributes:true,attributeFilter:['style']});
			}
		},
		beforeDestroyed () {
		    if (this.observer) {
				  this.observer.disconnect();
				  this.observer.takeRecords();
				  this.observer = null;
		    }
		},
		watch:{
			barHeight(val){
				this.$emit('height-change',{barHeight:val,barHeightNum:this.barHeightNum});
			}
		},
		methods: {
			leftTap() {
				this.$emit("click-left");
			},
			rightTap() {
				this.$emit("click-right");
			},
			titleTap(){
				this.$emit("click-title");
			}
		},
	};
</script>

<style scoped>
	.bar {
		position: relative;
		height: 46px;
	}

	.bar-body {
		width: 100%;
		background-color: #ffffff;
		color: black;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}
	
	.nav-bar{
		height: 46px;
		line-height: 46px;
		width: 100%;
		/* Safari flex*/
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.left-el {
		flex: 1;
		display: flex;
		display: -webkit-flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 10px;
		font-size: 15px;
		overflow: hidden;
	}

	.title-el {
		flex: 2;
		text-align: center;
		overflow: hidden;
		font-size: 16px;
		font-weight: 500;
	}
	
	.right-el {
		flex: 1;
		display: flex;
		display: -webkit-flex;
		justify-content: flex-end;
		text-align: right;
		margin-right: 10px;
		overflow: hidden;
		font-size: 15px;
		padding-right: 2px;
	}
	
	.title-el  > div {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.left-el > div{
		width: 50px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		display: flex;
		align-items: center;
		height: 100%;
	}
	.right-el > div{
		width: 50px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>